<template>
  <div class="ImportKg">
    <div class="w">
      <div class="header">
        <div class="title">导入知识图谱</div>
      </div>

      <div class="button-card" @click="wantUpload">
        <div class="button"><i class="el-icon-folder-opened" /> 导入</div>
        <div class="describe" v-html="importDescribe" />
      </div>

      <div class="button-card" @click="downloadTemplate">
        <div class="button"><i class="el-icon-download" /> 下载</div>
        <div class="describe" v-html="downloadDescribe" />
      </div>
    </div>

    <el-dialog
      class="import-dialog"
      title="导入知识图谱"
      :visible.sync="importDialogVisible"
      width="450px"
    >
      <el-input
        class="input"
        v-model="kgName"
        placeholder="请输入知识图谱名称"
      ></el-input>
      <el-upload
        class="upload"
        ref="upload"
        :auto-upload="false"
        :limit="1"
        accept="csv"
        drag
        :multiple="false"
        action="#"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或<em>点击上传</em><br />(只能上传csv文件)
        </div>
      </el-upload>
      <el-button class="button" type="primary" @click="upload">上传</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFileAPI } from "../../../api/kgbuilder/kgbuilder";

export default {
  name: "ImportKg",
  props: {
    user: { type: Object }
  },
  data() {
    return {
      importDescribe:
        "&nbsp;&nbsp;&nbsp;&nbsp;从已有数据集开始构建一个知识图谱,方便使用其他程序获取并处理数据,得到更大规模的知识图谱。",
      downloadDescribe:
        "&nbsp;&nbsp;&nbsp;&nbsp;你所提供的数据集是一个五列的表格,每一列分别是源节点ID(URI)、源节点类型描述、关系描述、目标节点ID(URI)和源节点标签。你可以点击这里下载一个模板文件。",
      importDialogVisible: false,
      kgName: "",
      fileList: [],
      uploadMessage: null
    };
  },
  methods: {
    downloadTemplate() {
      window.location.href = `./template.csv`;
    },
    wantUpload() {
      if (this.user === null) {
        this.$emit("adviceLogin");
        return;
      }
      this.importDialogVisible = true;
    },
    upload() {
      if (this.uploadMessage !== null) {
        this.$message.warning("上一次上传尚未完成,请稍等");
        return;
      }
      if (this.kgName === "") {
        this.$message.error("知识图谱名称不可为空");
        return;
      }
      if (this.$refs.upload.$data.uploadFiles.length === 0) {
        this.$message.error("数据集文件不可为空");
        return;
      }

      this.uploadMessage = this.$message.loading("数据集上传中...");

      let formData = new FormData();
      formData.append("file", this.$refs.upload.$data.uploadFiles[0].raw);
      formData.append("kgName", this.kgName);

      uploadFileAPI(
        formData,
        (id) => {
          let kg = { id: id, name: this.kgName };
          this.$emit("buildSuccess", kg);
          this.clearFiles();
          this.importDialogVisible = false;
          this.$message.success("上传知识图谱成功");
        },
        errorMessage => {
          this.$message.error("上传知识图谱失败:" + errorMessage);
        },
        () => {
          this.uploadMessage.close();
          this.uploadMessage = null;
        }
      );

    },
    clearFiles() {
      this.$refs.upload.$data.uploadFiles = [];
    }
  }
};
</script>

<style scoped>
.ImportKg {
  background-color: #f5f7fa;
  padding-top: 20px;
  padding-bottom: 30px;
  color: #303133;
}

.header {
  margin-bottom: 20px;
  height: 50px;
}
.header .title {
  box-sizing: border-box;
  float: left;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  border-bottom: rgb(217, 236, 255) solid 5px;
}

.button-card {
  box-sizing: border-box;
  margin: 0 auto 20px;
  height: 150px;
  width: 1100px;
  background-color: #ffffff;
  border: #dcdfe6 solid 1px;
  border-radius: 5px;
  box-shadow: 0 5px 20px -15px rgba(0, 0, 0, 0.6);
}
.button-card .describe {
  margin-left: 25px;
  margin-top: 40px;
  height: 80px;
  width: 900px;
  text-align: left;
  /*border-bottom: rgb(217, 236, 255) solid 5px;*/
}
.button-card .button {
  box-sizing: border-box;
  float: right;
  height: 150px;
  line-height: 150px;
  width: 150px;
  border-left: #ebeef5 solid 1px;
  border-radius: 0 5px 5px 0;
  font-size: 20px;
  font-weight: bold;
}

.button-card:hover {
  cursor: pointer;
  color: #409eff;
}
.button-card:hover .button {
  background-color: #409eff;
  color: #ffffff;
}

.import-dialog .input {
  margin-bottom: 20px;
  width: 360px;
}
.import-dialog .button {
  margin-top: 20px;
  width: 360px;
}
</style>
